﻿<html>

<head>
    <script src="/ShengAo/static/js/common.js"></script>

</head>

<body>
    <div id="app">



        <el-form :model="userFrom" status-icon :rules="rules2" ref="ruleForm2" label-width="100px">
            <el-form-item label="loginName" prop="loginName">
                <el-input type="text" v-model="userFrom.loginName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="name" prop="name">
                <el-input type="text" v-model="userFrom.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="password" prop="password">
                <el-input type="password" v-model="userFrom.password" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm2')">确 定</el-button>
        </span>


    </div>
    <script type="text/javascript">
        var validate = (rule, value, callback) => {
            if (value === '') {    
                callback(new Error('必填项'));
            } else {
                callback();
            }
        };
        var config = {
            el: '#app',
            data: {
                isCollapse: true,
                tableData: [],
                tableMultipleSelection: [],
                total: 0,
                formInline: {
                    loginName: { Field: "loginName", Value: "", Action: "in", Logic: "AND" },
                    name: { Field: "name", Value: "", Action: "in", Logic: "AND" }
                },
                dialogVisible: false,
                activeName2: "first",
                AllRoleList: [],
                userFrom: {
                    id: guidEmpty,
                    loginName: '',
                    name: '',
                    password: '',
                    sysDepartmentId: 'C0962BC1-7627-410C-E435-08D6B33FF0AF',
                    rolesId: [],
                    userRoles: []
                },
                rules2: {
                    LoginName: [
                        { validator: validate, trigger: 'blur' }
                    ],
                    Password: [
                        { validator: validate, trigger: 'blur' }
                    ]
                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                onQuery: function (val) {
                    this.GetPageData(1);
                },
                //保存选中结果
                handleSelectionChange(val) {
                    console.info(val);
                    this.tableMultipleSelection = val;
                },
                onDelete: function (val) {
                    console.info(this.tableMultipleSelection);
                    var delIds = [];
                    for (var item of this.tableMultipleSelection) {
                        delIds.push(item.id);
                    }
                    this.$axios.post('/api/User/DeleteMuti', delIds).then(function (response) {
                        var ajaxModel = response.data
                        var retMessage = '操作成功';
                        //判断是否保存成功
                        if (isSuccess(ajaxModel)) {
                            app.GetPageData(1);
                        } else {
                            retMessage = ajaxModel.message;
                        }
                        app.$message({
                            type: 'error',
                            message: retMessage
                        });
                    })
                },
                //Ajax提交数据
                onSubmitForm: function () {
                    console.log(this.userFrom);
                    this.$axios.post('/api/User/Save', this.userFrom).then(function (response) {
                        var ajaxModel = response.data
                        //判断是否保存成功
                        if (isSuccess(ajaxModel)) {
                            app.GetPageData(1);
                            app.$message({
                                type: 'success',
                                message: "操作成功"
                            });
                        }
                        //关闭DDialog窗口
                        app.dialogVisible = false
                    })
                },
                submitForm: function (formName) {
                    //验证
                    this.$refs[formName].validate((valid) => {
                        //验证通过
                        if (valid) {
                            //处理提交数据
                            this.userFrom.userRoles = [];
                            for (var item of this.userFrom.rolesId) {
                                this.userFrom.userRoles.push({ SysUserId: this.userFrom.id, SysRoleId: item });
                            }
                            //提交数据
                            this.onSubmitForm();
                        } else {
                            //验证失败
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                Get: function () {

                    if (this.tableMultipleSelection.length == 0) {
                        app.$message({
                            type: 'error',
                            message: "至少选择一条数据"
                        });
                        return;
                    }
                    if (this.tableMultipleSelection.length > 1) {
                        app.$message({
                            type: 'error',
                            message: "请选择一条数据"
                        });
                        return;
                    }
                    var model = this.tableMultipleSelection[0];
                    this.$axios.get(`/api/User/get?id=${model.id}`).then(function (response) {
                        var ajaxModel = response.data;
                        app.userFrom = ajaxModel.data;
                        console.log("12312");
                        console.log(ajaxModel.data);
                        app.dialogVisible = true;
                    })

                },
                //分页数修改触发事件
                currentChange: function (indexValue) {
                    this.GetPageData(indexValue);
                },
                GetPageData: function (currentIndex) {
                    //
                    var formData = new FormData();
                    formData.append('offset', (currentIndex - 1) * 10);
                    formData.append('Limit', 10);
                    formData.append('filterConditionList', JSON.stringify([this.formInline.loginName, this.formInline.name]));

                    var currObj = this;
                    this.$axios.post('/api/User/GetList', formData).then(function (response) {
                        var ajaxModel = response.data
                        currObj.tableData = ajaxModel.data.pageData
                        currObj.total = ajaxModel.data.rowCount;
                    })
                },
                //获取所有角色信息
                GetAllRoleList: function () {
                    var currObj = this;
                    this.$axios.get('/api/User/GetAllRoleList').then(function (response) {
                        var ajaxModel = response.data
                        currObj.AllRoleList = ajaxModel.data;
                    })
                }
            }, created: function () {
                this.GetPageData(1);
                this.GetAllRoleList();
            }
        };
        app = new Vue(config);
    </script>
</body>

</html>